import React, { useState } from "react";
// useState 基本数据类型值相等时候 修改不会触发render; useState 修改是异步操作
// this.setState 基本数据类型值相等时候 修改会触发render
function App() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState("传智");
    const [obj, setObj] = useState({ name: "传智播客" });
    return (
        <div>
            <p>count: {count}</p>
            <p>name: {name}</p>
            <p>obj.name: {obj.name}</p>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}>
                count + 1
            </button>
            <button
                onClick={() => {
                    setName(name);
                }}>
                setName
            </button>
            <button
                onClick={() => {
                    setObj({ name: "传智播客" });
                }}>
                setObjName
            </button>
            <hr />
            <Son count={count} obj={obj}></Son>
        </div>
    );
}
// class App extends React.Component {
//     state = {
//         name: "传智",
//         count: 0,
//         obj: { name: "传智播客" },
//     };
//     render() {
//         return (
//             <div>
//                 <p>count: {this.state.count}</p>
//                 <p>name: {this.state.name}</p>
//                 <p>obj.name: {this.state.obj.name}</p>
//                 <button
//                     onClick={() => {
//                         this.setState({
//                             count: this.state.count,
//                         });
//                     }}>
//                     count + 1
//                 </button>
//                 <button
//                     onClick={() => {
//                         this.setState({
//                             name: this.state.name,
//                         });
//                     }}>
//                     setName
//                 </button>
//                 <button
//                     onClick={() => {
//                         this.setState({
//                             obj: { name: "传智播客" },
//                         });
//                     }}>
//                     setObjName
//                 </button>
//                 <hr />
//                 <Son count={this.state.count}></Son>
//             </div>
//         );
//     }
// }

function Son(props) {
    console.log("子组件渲染了");
    return (
        <div>
            Son
            <p>父组件来的count: {props.count}</p>
        </div>
    );
}
export default App;
